<template>
  <NavBar class="nav">
    <template v-slot:left>
      <img
        src="~assets/img/detail/left.png"
        alt=""
        @click="back"
        class="left-img"
      />
    </template>
    <template v-slot:center>
      <span
        v-for="(item, index) in titles"
        :key="index"
        class="title"
        :class="{ active: index === currentIndex }"
        @click="itemClick(index)"
        >{{ item }}</span
      >
    </template>
    <template v-slot:right></template>
  </NavBar>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";

export default {
  name: "detailNavBar",
  components: {
    NavBar,
  },
  data() {
    return {
      titles: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0,
    };
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
      let refs = this.$parent.$refs;
      switch (index) {
        case 0:
          this.goAnchor(refs.navBar);
          break;
        case 1:
          this.goAnchor(refs.detailParams);
          break;
        case 2:
          this.goAnchor(refs.detailComment);
          break;
        case 3:
          this.goAnchor(refs.detailGoods);
          break;
      }
    },
    back() {
      this.$router.go(-1);
    },
    goAnchor(ref) {
      document.documentElement.scrollTop = ref.$el.offsetTop + 5;
      window.pageYOffset = ref.$el.offsetTop + 5;
      document.body.scrollTop = ref.$el.offsetTop + 5;
    },
  },
};
</script>

<style scoped>
.title {
  color: #615858;
  font-size: 14px;
  padding: 10px;
}
.left-img {
  width: 20px;
  height: 20px;
  padding: 12px;
}
.active {
  color: var(--color-high-text);
}
.left {
  padding: 11px 16px;
  /*width: 24px;*/
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
}
</style>
